#Bootstrap studio xs device how to#

You can browse through all available articles in the sidebar on the left.

Resize the browser to see the different breakpoints you've just designed.Welcome to Bootstrap Studio's documentation, where you will find help materials and guides that explain every part of the app. Select the Fit to Browser option in the Player Toolbar.

Select all the buttons and give them a column span of 2.Ĭlick the Run Screen button to preview your prototype. Give the title cell a column span of 2, and the navigation cell a column span of 10. Make it visible for desktop (MD).Īdjust the column span of the cell where the title is and the one with the navigation so they are displayed side by side. Hide the cell with the navigation buttons.Ĭlick to select the cell, and notice how the visibility is inherited from the phone breakpoint (XS). Select and hide the cell with the menu icon. Make changes to display the cell in the desktop breakpoint.īack in the start state, use the Responsive Breakpoint Picker to switch to the Desktop breakpoint. This is what your Interactions Explorer looks like after these changes. With the Toggle Back option you set in the previous step, clicking on the icon will hide the buttons. You can also change the icon to display a cross. In the new state, make the cell visible by changing its Visibility in the Responsive Options section of the Properties Panel.

#Bootstrap studio xs device how to#

If you don't know how to do this, see Adding Your First Interaction. Add an interaction to display the hidden cell.Ĭlick on the menu icon, and add a tap interaction to a new state with the Toggle Back option checked. The cell you hid is now displayed with a sky blue background and you can see the different breakpoints where it's hidden in gray. Select the row and check the Highlight Hidden Cells option. Set the visibility of the cell to Hidden.Ĭlick on the cell to select it and change its Visibility to Hidden, from the Responsive Options section of the Properties Panel. The one in the example has a white background with purple text, font size Roboto size 16, and a thickness of 0 so its borders aren't visible.Ĭreate four more buttons like the first one. This will be the hidden cell with the navigation buttons. The third cell in the row has a column span of 12, so it is displayed below the cells from the previous steps. The bottom margin is set to 15 by default. To set a top margin of 15, select the custom option from the dropdown, and then type a value for the top margin. To make it look like the one in the example, select the menu icon, give it the same purple color as the title, and align it to the right. Set column span for the second cell to 6, so both cells are displayed side by side.Īdd an icon to the second cell you just resized. The title in the example has customized font settings ( Roboto, size 20, bold, purple) and a margin of 15. Add elements to the row.Īdd a title in the first cell, and set the column span for the cell to 6. Making changes to display the cell in the desktop breakpoint.Adding an interaction to display the hidden cell.For instructions, see Creating Your First Responsive Web Page Layout. You need to start with a screen with a Browser viewport and the default responsive layout for phone. Showing Real-World Scenes in Your StoryboardsĪt the end of this topic you will have a responsive header with navigation that looks different for phone and desktop.Showing Branches for Optional or Parallel Paths.Narrating a User's Story with a Storyboard.Working with Others on Indigo Project Files.Adding a Starting Animation to Your Screen.Animating Elements into View on a Screen.Creating Your First Responsive Web Page Layout.Responsive Web Design Overview & Key Concepts.Understanding Screen Interactions & States.Storyboards, Screens, and Screenparts Overview.